<template>
  <div class="dashboard tech-content-bg">
    <el-row :gutter="20">
      <!-- 统计卡片 -->
      <el-col :xs="24" :sm="12" :md="6" v-for="card in statsCards" :key="card.title">
        <div class="tech-stats-card">
          <div class="stats-content">
            <div class="stats-icon" :style="{ backgroundColor: card.color }">
              <el-icon><component :is="iconComponents[card.icon]" /></el-icon>
            </div>
            <div class="stats-info">
              <div class="tech-stats-value">{{ card.value }}</div>
              <div class="tech-stats-label">{{ card.title }}</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 系统信息 -->
      <el-col :xs="24" :md="12">
        <div class="tech-card">
          <div class="card-header">
            <h3 class="tech-title tech-title-medium">系统信息</h3>
          </div>
          <div class="system-info">
            <div class="info-item">
              <span class="label tech-text">操作系统:</span>
              <span class="value tech-text">Linux Ubuntu 20.04</span>
            </div>
            <div class="info-item">
              <span class="label tech-text">CPU使用率:</span>
              <div class="progress-container">
                <div class="tech-progress">
                  <div class="tech-progress-bar" :style="{ width: cpuUsage + '%' }"></div>
                </div>
                <span class="progress-text tech-text-muted">{{ cpuUsage }}%</span>
              </div>
            </div>
            <div class="info-item">
              <span class="label tech-text">内存使用率:</span>
              <div class="progress-container">
                <div class="tech-progress">
                  <div class="tech-progress-bar" :style="{ width: memoryUsage + '%' }"></div>
                </div>
                <span class="progress-text tech-text-muted">{{ memoryUsage }}%</span>
              </div>
            </div>
            <div class="info-item">
              <span class="label tech-text">磁盘使用率:</span>
              <div class="progress-container">
                <div class="tech-progress">
                  <div class="tech-progress-bar" :style="{ width: diskUsage + '%' }"></div>
                </div>
                <span class="progress-text tech-text-muted">{{ diskUsage }}%</span>
              </div>
            </div>
            <div class="info-item">
              <span class="label tech-text">运行时间:</span>
              <span class="value tech-text">{{ uptime }}</span>
            </div>
          </div>
        </div>
      </el-col>

      <!-- 快捷操作 -->
      <el-col :xs="24" :md="12">
        <div class="tech-card">
          <div class="card-header">
            <h3 class="tech-title tech-title-medium">快捷操作</h3>
          </div>
          <div class="quick-actions">
            <button
              v-for="action in quickActions"
              :key="action.name"
              @click="handleQuickAction(action.action)"
              class="tech-button action-btn"
            >
              <el-icon><component :is="iconComponents[action.icon]" /></el-icon>
              <span>{{ action.name }}</span>
            </button>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 最近活动 -->
      <el-col :span="24">
        <div class="tech-card">
          <div class="card-header">
            <h3 class="tech-title tech-title-medium">最近活动</h3>
          </div>
          <div class="activity-timeline">
            <div
              v-for="activity in recentActivities"
              :key="activity.id"
              class="activity-item"
            >
              <div class="activity-dot" :style="{ backgroundColor: activity.color }"></div>
              <div class="activity-content">
                <div class="activity-title tech-text">{{ activity.title }}</div>
                <div class="activity-desc tech-text-muted">{{ activity.description }}</div>
                <div class="activity-time tech-text-muted">{{ activity.time }}</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import {
  User,
  UserFilled,
  Key,
  Monitor,
  Plus,
  Setting,
  View,
  Refresh
} from '@element-plus/icons-vue'

// 注册图标组件
const iconComponents = {
  User,
  UserFilled,
  Key,
  Monitor,
  Plus,
  Setting,
  View,
  Refresh
}

// 统计卡片数据
const statsCards = ref([
  {
    title: '用户总数',
    value: '156',
    icon: 'User',
    color: '#409EFF'
  },
  {
    title: '角色数量',
    value: '8',
    icon: 'UserFilled',
    color: '#67C23A'
  },
  {
    title: '权限数量',
    value: '24',
    icon: 'Key',
    color: '#E6A23C'
  },
  {
    title: '在线用户',
    value: '32',
    icon: 'Monitor',
    color: '#F56C6C'
  }
])

// 系统资源使用率
const cpuUsage = ref(45)
const memoryUsage = ref(68)
const diskUsage = ref(32)
const uptime = ref('7天 12小时 35分钟')

// 快捷操作
const quickActions = ref([
  {
    name: '添加用户',
    type: 'primary',
    icon: 'Plus',
    action: 'addUser'
  },
  {
    name: '系统设置',
    type: 'success',
    icon: 'Setting',
    action: 'systemSettings'
  },
  {
    name: '查看日志',
    type: 'warning',
    icon: 'View',
    action: 'viewLogs'
  },
  {
    name: '刷新数据',
    type: 'info',
    icon: 'Refresh',
    action: 'refreshData'
  }
])

// 最近活动
const recentActivities = ref([
  {
    id: 1,
    title: '用户登录',
    description: '管理员 admin 登录系统',
    time: '2024-01-15 14:30:25',
    color: '#409EFF'
  },
  {
    id: 2,
    title: '创建角色',
    description: '创建了新角色 "运维工程师"',
    time: '2024-01-15 13:45:12',
    color: '#67C23A'
  },
  {
    id: 3,
    title: '权限更新',
    description: '更新了用户管理权限配置',
    time: '2024-01-15 12:20:08',
    color: '#E6A23C'
  },
  {
    id: 4,
    title: '系统备份',
    description: '执行了系统数据备份任务',
    time: '2024-01-15 10:15:30',
    color: '#909399'
  }
])

// 获取进度条颜色
const getProgressColor = (percentage: number) => {
  if (percentage < 50) return '#67C23A'
  if (percentage < 80) return '#E6A23C'
  return '#F56C6C'
}

// 处理快捷操作
const handleQuickAction = (action: string) => {
  switch (action) {
    case 'addUser':
      ElMessage.info('跳转到用户管理页面')
      break
    case 'systemSettings':
      ElMessage.info('跳转到系统设置页面')
      break
    case 'viewLogs':
      ElMessage.info('跳转到日志管理页面')
      break
    case 'refreshData':
      refreshDashboardData()
      break
  }
}

// 刷新仪表盘数据
const refreshDashboardData = () => {
  ElMessage.success('数据刷新成功')
  // 这里可以添加实际的数据刷新逻辑
}

// 组件挂载时加载数据
onMounted(() => {
  // 这里可以添加实际的数据加载逻辑
})
</script>

<style scoped>
.dashboard {
  padding: 20px;
  min-height: calc(100vh - 120px);
}

.card-header {
  padding: 0 0 16px 0;
  border-bottom: 1px solid var(--tech-glass-border);
  margin-bottom: 20px;
}

.stats-content {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.stats-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.stats-icon .el-icon {
  font-size: 20px;
  color: white;
}

.stats-info {
  flex: 1;
}

.system-info {
  padding: 10px 0;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--tech-separator);
  transition: all 0.3s ease;
}

.info-item:last-child {
  margin-bottom: 0;
  border-bottom: none;
}

.info-item:hover {
  background: rgba(120, 220, 255, 0.05);
  border-radius: 8px;
  padding-left: 12px;
  padding-right: 12px;
}

.info-item .label {
  width: 120px;
  font-size: 14px;
  font-weight: 500;
}

.info-item .value {
  font-weight: 500;
}

.progress-container {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 16px;
}

.progress-text {
  min-width: 45px;
  text-align: right;
  font-size: 13px;
  font-weight: 500;
  color: var(--tech-accent-color);
}

/* 自定义进度条样式 */
.info-item .tech-progress {
  height: 10px;
  background: rgba(50, 100, 150, 0.3);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.info-item .tech-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--tech-accent-color), var(--tech-accent-light));
  border-radius: 6px;
  position: relative;
  box-shadow: 0 0 10px var(--tech-accent-glow);
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px;
}

.action-btn {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  border: 2px solid var(--tech-glass-border);
  background: var(--tech-glass-bg);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--tech-accent-glow), transparent);
  transition: left 0.6s ease;
}

.action-btn:hover {
  border-color: var(--tech-accent-color);
  background: rgba(120, 220, 255, 0.12);
  box-shadow: 0 8px 25px var(--tech-accent-glow);
  transform: translateY(-3px);
}

.action-btn:hover::before {
  left: 100%;
}

.action-btn .el-icon {
  font-size: 16px;
  color: var(--tech-accent-color);
}

.activity-timeline {
  position: relative;
  padding: 8px 0;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 28px;
  position: relative;
  padding: 12px 0;
  border-bottom: 1px solid var(--tech-separator);
  transition: all 0.3s ease;
}

.activity-item:last-child {
  margin-bottom: 0;
  border-bottom: none;
}

.activity-item:hover {
  background: rgba(120, 220, 255, 0.05);
  border-radius: 10px;
  padding-left: 16px;
  padding-right: 16px;
}

.activity-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 24px;
  bottom: -16px;
  width: 2px;
  background: linear-gradient(180deg, var(--tech-accent-color), var(--tech-separator));
  border-radius: 1px;
}

.activity-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: 18px;
  margin-top: 6px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
  border: 2px solid var(--tech-accent-color);
  position: relative;
}

.activity-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tech-accent-color);
  box-shadow: 0 0 8px var(--tech-accent-glow);
}

.activity-content {
  flex: 1;
  padding-top: 2px;
}

.activity-title {
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 15px;
  color: var(--tech-text-primary);
}

.activity-desc {
  font-size: 13px;
  margin-bottom: 6px;
  line-height: 1.5;
  color: var(--tech-text-secondary);
}

.activity-time {
  font-size: 12px;
  color: var(--tech-accent-color);
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dashboard {
    padding: 10px;
  }

  .stats-content {
    flex-direction: column;
    text-align: center;
  }

  .stats-icon {
    margin-right: 0;
    margin-bottom: 12px;
  }

  .info-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .progress-container {
    width: 100%;
    margin-left: 0;
    margin-top: 8px;
  }

  .quick-actions {
    grid-template-columns: 1fr;
  }
}
</style>
